<template>
  <div></div>
</template>

<script setup>
// 创建 Leaflet 地图
var map = L.map("mapContainer").setView([51.505, -0.09], 13);

// 示例行政区坐标，实际中需要替换成你的行政区坐标
var districtCoordinates = [
  [51.5, -0.1],
  [51.51, -0.09],
  [51.51, -0.11],
];

// 创建行政区
var district = L.polygon(districtCoordinates, { color: "blue" }).addTo(map);

// 定义弹框内容
var popupContent = "<p>Hello, this is the district!</p>";

// 监听鼠标移入事件
district.on("mouseover", function (event) {
  // 获取鼠标所在位置的行政区坐标
  var districtLatLng = event.latlng;

  // 计算弹框位置
  var popupLatLng = L.latLng(districtLatLng.lat - 0.09, districtLatLng.lng);
  // 上方 10px

  // 创建弹框
  var popup = L.popup()
    .setLatLng(popupLatLng)
    .setContent(popupContent)
    .openOn(map);
});

// 监听鼠标移出事件，关闭弹框
district.on("mouseout", function () {
  map.closePopup();
});
</script>

<style lang="scss" scoped></style>
